/**
 * TODO：根据消除行数增加速度
 * 
 */
import { useEffect, useState, useCallback } from "react";
import "./app.less";

const localStorageKey = "tetris";

// 所有方块数组
const blocks = [
  [
    [
      [0, 0, 0, 0],
      [1, 1, 1, 0],
      [0, 1, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [1, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [0, 1, 0, 0],
      [1, 1, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [1, 0, 0, 0],
      [1, 1, 0, 0],
      [1, 0, 0, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [1, 0, 0, 0],
      [1, 0, 0, 0],
      [1, 1, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [1, 1, 1, 0],
      [1, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [1, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [0, 0, 1, 0],
      [1, 1, 1, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [1, 1, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [1, 0, 0, 0],
      [1, 1, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [1, 1, 0, 0],
      [1, 0, 0, 0],
      [1, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [1, 1, 1, 0],
      [0, 0, 1, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [1, 1, 0, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [1, 1, 0, 0],
      [1, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [1, 1, 0, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [1, 1, 0, 0],
      [1, 0, 0, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [0, 1, 1, 0],
      [1, 1, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [0, 1, 1, 0],
      [0, 0, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 1, 0],
      [1, 1, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [0, 1, 1, 0],
      [0, 0, 1, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
    ],
  ],
  [
    [
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [1, 1, 1, 1],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],

    [
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
    ],

    [
      [0, 0, 0, 0],
      [1, 1, 1, 1],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ],
  ],
];

// 空方块数组
const emptyBlock = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
];

const emptyLine = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

const createEmptyScene = () => {
  let scene = [];
  for (let row = 0; row < 28; row++) {
    let colArray = [];
    for (let col = 0; col < 18; col++) {
      colArray.push(0);
    }
    scene.push(colArray);
  }
  return scene;
};

// 游戏场景数组
// const scene = [
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// ];

const createCube = () => {
  // 6排
  let rowIndex = Math.floor(Math.random() * 6) + 1;
  // 4个
  let colIndex = Math.floor(Math.random() * 3) + 1;
  return [rowIndex, colIndex];
};

/**
 *
 * @param {number} line 行数
 * 1排100分
 * 2排300分
 * 3排500分
 * 4排800分
 */
const getScore = (line) => {
  switch (line) {
    case 2:
      return 300;
    case 3:
      return 500;
    case 4:
      return 800;
    default:
      return 100;
  }
};

// const getColor = () => {
//   const colors = [
//     "#FF6666",
//     "#FFFF00",
//     "#006699",
//     "#FF9966",
//     "#0066CC",
//     "#339933",
//     "#FFCC33",
//     "#336699",
//     "#666699",
//   ];
//   return colors[Math.floor(Math.random() * 9) + 1];
// };

let timer = null;
const clearTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

const startPosition = [0, 7];

function App() {
  // 游戏场景数组
  // const [mainArray, setMainArray] = useState(scene);
  const [mainArray, setMainArray] = useState(createEmptyScene());

  // 当前方块数在blocks位置
  const [currentCube, setCurrentCube] = useState([0, 0]);

  // 下一个方块在blocks位置
  const [nextCube, setNextCube] = useState([0, 0]);

  // 下一个方块数组
  const [nextCubeArray, setNextCubeArray] = useState(emptyBlock);

  // 分数
  const [score, setScore] = useState(0);

  // 消除行数
  const [rowCount, setRowCount] = useState(0);

  // 当前方块位置 [顶部，左侧]
  const [cubePosition, setCubePosition] = useState(startPosition);

  const [isStart, setIsStart] = useState(false);

  // 下落时间
  let [timeSecond, setTimeSecond] = useState(500);

  const [flag, setFlag] = useState(0);

  // 是否结束游戏
  const [isFinished, setIsFinished] = useState(false);

  // 历史记录
  const [historyData, setHistoryData] = useState(null);

  // 暂停游戏
  const [isPause, setIsPause] = useState(false);

  // 生成并显示新的下一个方块
  const createNextCube = () => {
    // 随机生成下一个方块
    const nextCube = createCube();

    // 显示下一个方块
    setNextCube(nextCube);

    // 显示下一个方块
    setNextCubeArray(blocks[nextCube[0]][nextCube[1]]);
  };

  // 启动计时器
  const createTimer = () => {
    let temp = 0;
    clearTimer();
    timer = setInterval(() => {
      temp++;
      setFlag(temp);
    }, timeSecond);
  };

  // 开始游戏
  const start = () => {
    // 清空场景
    setMainArray(createEmptyScene());

    setIsStart(true);
    setIsFinished(false);
    // 随机生成当前方块
    const curCube = createCube();
    setCurrentCube(curCube);

    // TODO 测试长条
    // setCurrentCube([6, 0]);

    // 随机生成并显示下一个方块
    createNextCube();

    // 分数和行数清0
    setScore(0);
    setRowCount(0);

    // 启动计时器
    createTimer();
  };

  // 消除得分
  const clearLines = useCallback(() => {
    let tempScene = [...mainArray];
    let clearArray = [];
    for (let row = 0; row < tempScene.length; row++) {
      const tempRow = tempScene[row];
      // 记录所有为2的行数，
      let index = 0;
      for (let col = 0; col < tempRow.length; col++) {
        if (tempRow[col] === 2) {
          index++;
        }
      }
      if (index === 18) {
        clearArray.push(row);
      }
    }

    if (clearArray.length) {
      // 消除行数
      clearArray.forEach((row) => {
        for (let index = 0; index < tempScene[row].length; index++) {
          tempScene[row][index] = 0;
        }
      });
      setMainArray(tempScene);

      clearArray.forEach((row) => {
        // 删除相应行
        tempScene.splice(row, 1);

        // 补充行
        tempScene.unshift(emptyLine);
      });
      setMainArray(tempScene);

      // 计算得分
      const tempScore = getScore(clearArray.length);
      let beforeScore = score;
      const newScore = beforeScore + tempScore;
      setScore(newScore);

      // 计算排数
      let newRowCount = rowCount + clearArray.length;
      setRowCount(newRowCount);
    }
  }, [mainArray, score, rowCount]);

  /**
   * 方块到达最底部后续操作
   * 1.停止时间
   * 2.之前的方块固定住
   * 3.检查是否可以消除
   * 4.放入下一个方块，生成新方块并继续游戏
   */
  const downBottom = useCallback(() => {
    // 停止时间
    clearInterval(timer);

    // 固定所有方块
    const tempScene = [...mainArray];
    for (let row = 0; row < tempScene.length; row++) {
      const tempRow = tempScene[row];
      for (let col = 0; col < tempRow.length; col++) {
        if (tempRow[col] === 1) {
          tempRow[col] = 2;
        }
      }
    }
    setMainArray(tempScene);

    // 检测是否可以消除
    clearLines();

    // 放入方块，生成新的下一个方块，继续游戏
    setCubePosition(startPosition);
    setCurrentCube(nextCube);

    // 随机生成并显示下一个方块
    createNextCube();

    // 启动计时器
    createTimer();
  }, [mainArray, nextCube]);

  // 清除当前位置方块
  const clearCurrentPosition = useCallback(() => {
    if (isStart) {
      const cubeArray = blocks[currentCube[0]][currentCube[1]];

      let tempMainArray = [...mainArray];
      // 把方块每一排放入场景相应位置
      let cubeRowLength = cubeArray.length;
      for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
        let cubeRowColLength = cubeArray[cubeRow].length;
        for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
          if (!!cubeArray[cubeRow][cubeRowCol]) {
            tempMainArray[cubePosition[0] + cubeRow][
              cubePosition[1] + cubeRowCol
            ] = 0;
          }
        }
      }
      setMainArray(tempMainArray);
    }
  }, [currentCube, cubePosition, isStart]);

  // 向左移动，检测左边是否到0，或者右其它产生的方块
  const checkLeft = useCallback(() => {
    let canMoveLeft = true;
    let top = cubePosition[0];
    let left = cubePosition[1];

    const cubeArray = blocks[currentCube[0]][currentCube[1]];
    let tempMainArray = [...mainArray];
    let cubeRowLength = cubeArray.length;

    for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
      let cubeRowColLength = cubeArray[cubeRow].length;
      for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
        const nextRow = tempMainArray[top + cubeRow];
        if (nextRow === undefined && !!cubeArray[cubeRow][cubeRowCol]) {
          canMoveLeft = false;
        } else if (nextRow) {
          const nextItem = nextRow[left + cubeRowCol - 1];
          if (
            !!cubeArray[cubeRow][cubeRowCol] &&
            (nextItem === undefined || nextItem === 2)
          ) {
            canMoveLeft = false;
          }
        }
      }
    }
    return canMoveLeft;
  }, [cubePosition, currentCube, isStart]);

  // 向右移动，检测左边是否到0，或者右其它产生的方块
  const checkRight = useCallback(() => {
    let canMoveLeft = true;
    let top = cubePosition[0];
    let left = cubePosition[1];

    const cubeArray = blocks[currentCube[0]][currentCube[1]];
    let tempMainArray = [...mainArray];
    let cubeRowLength = cubeArray.length;

    for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
      let cubeRowColLength = cubeArray[cubeRow].length;
      for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
        const nextRow = tempMainArray[top + cubeRow];
        if (nextRow === undefined && !!cubeArray[cubeRow][cubeRowCol]) {
          canMoveLeft = false;
        } else if (nextRow) {
          const nextItem = nextRow[left + cubeRowCol + 1];
          if (
            !!cubeArray[cubeRow][cubeRowCol] &&
            (nextItem === undefined || nextItem === 2)
          ) {
            canMoveLeft = false;
          }
        }
      }
    }
    return canMoveLeft;
  }, [cubePosition, currentCube, isStart]);

  // 向下移动，检测左边是否到0，或者右其它产生的方块
  const checkBottom = useCallback(() => {
    let canMoveBottom = true;
    let top = cubePosition[0];
    let left = cubePosition[1];

    const cubeArray = blocks[currentCube[0]][currentCube[1]];
    let tempMainArray = [...mainArray];
    let cubeRowLength = cubeArray.length;

    for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
      let cubeRowColLength = cubeArray[cubeRow].length;
      for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
        const nextRow = tempMainArray[top + cubeRow + 1];
        if (nextRow === undefined && !!cubeArray[cubeRow][cubeRowCol]) {
          canMoveBottom = false;
        } else if (nextRow) {
          const nextItem = nextRow[left + cubeRowCol];
          if (nextItem) {
            if (
              !!cubeArray[cubeRow][cubeRowCol] &&
              (nextItem === undefined || nextItem === 2)
            ) {
              canMoveBottom = false;
            }
          }
        }
      }
    }
    return canMoveBottom;
  }, [cubePosition, currentCube, isStart]);

  const checkChangeDirection = useCallback(() => {
    let canChange = true;
    let top = cubePosition[0];
    let left = cubePosition[1];

    const tempCubeRow = currentCube[0];
    let tempCureCol = currentCube[1];
    tempCureCol++;
    if (tempCureCol > 3) {
      tempCureCol = 0;
    }

    // 判断左边
    const cubeArray = blocks[tempCubeRow][tempCureCol];
    let tempMainArray = [...mainArray];
    let cubeRowLength = cubeArray.length;
    for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
      let cubeRowColLength = cubeArray[cubeRow].length;
      for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
        const nextRow = tempMainArray[top + cubeRow];
        if (nextRow === undefined && !!cubeArray[cubeRow][cubeRowCol]) {
          canChange = false;
        } else if (nextRow) {
          const nextItem = nextRow[left + cubeRowCol];
          if (
            !!cubeArray[cubeRow][cubeRowCol] &&
            (nextItem === undefined || nextItem === 2)
          ) {
            canChange = false;
          }
        }
      }
    }
    return canChange;
  }, [cubePosition, currentCube, isStart]);

  // 向左移动
  const moveLeft = useCallback(() => {
    if (isStart && checkLeft()) {
      let left = cubePosition[1];
      left--;
      // 清除当前位置方块
      clearCurrentPosition();
      setCubePosition([cubePosition[0], left]);
    }
  }, [currentCube, cubePosition, isStart]);

  // 向右移动
  const moveRight = useCallback(() => {
    if (isStart && checkRight()) {
      let left = cubePosition[1];
      left++;

      // 清除当前位置方块
      clearCurrentPosition();

      setCubePosition([cubePosition[0], left]);
    }
  }, [currentCube, cubePosition, isStart]);

  // 向下移动
  const moveDown = useCallback(() => {
    if (isStart) {
      if (checkBottom()) {
        let top = cubePosition[0];
        top++;

        // 清除当前位置方块
        clearCurrentPosition();

        setCubePosition([top, cubePosition[1]]);
      } else {
        // 到达底部或停留在其它位置
        downBottom();
      }
    }
  }, [currentCube, cubePosition, isStart]);

  // 修改方向
  const changeCubeDirection = useCallback(() => {
    if (isStart && checkChangeDirection()) {
      // 清除当前位置方块
      clearCurrentPosition();
      const tempCubeRow = currentCube[0];
      let tempCureCol = currentCube[1];
      tempCureCol++;
      if (tempCureCol > 3) {
        tempCureCol = 0;
      }
      setCurrentCube([tempCubeRow, tempCureCol]);
    }
  }, [currentCube, cubePosition]);

  // 结束游戏
  const finishGame = () => {
    clearTimer();
    setIsFinished(true);
    setIsStart(false);

    try {
      const localScoreString = window.localStorage.getItem(localStorageKey);
      if (localScoreString) {
        const localScoreJson = JSON.parse(localScoreString);
        setHistoryData(localScoreJson);
        if (localScoreJson.score < score) {
          // 重新写入最高分
          const currentDate = new Date();
          window.localStorage.setItem(
            localStorageKey,
            JSON.stringify({
              score,
              line: rowCount,
              time: `${currentDate.getFullYear()}-${
                currentDate.getMonth() + 1
              }-${currentDate.getDate()} ${currentDate.getHours()}: ${currentDate.getMinutes()}`,
            })
          );
        }
      }
    } catch (e) {}
  };

  const pauseGame = () => {
    if (isStart && !isFinished) {
      if (isPause) {
        // 继续
        createTimer();
      } else {
        // 暂停
        clearInterval(timer);
      }
      setIsPause(!isPause);
    }
  };

  useEffect(() => {
    document.onkeydown = function (event) {
      const { keyCode } = event;
      if (keyCode === 38) {
        // 向上 修改方向
        changeCubeDirection();
      } else if (keyCode === 37) {
        // 向左
        moveLeft();
      } else if (keyCode === 39) {
        // 向右
        moveRight();
      } else if (keyCode === 40) {
        // 向下
        moveDown();
      } else if (keyCode === 32) {
        // 暂停
        pauseGame();
      }
    };
  }, [currentCube, cubePosition, isStart, isPause, isFinished]);

  useEffect(() => {
    moveDown();
  }, [flag]);

  // 更新方块位置等
  useEffect(() => {
    if (!isStart) {
      return;
    }
    const cubeArray = blocks[currentCube[0]][currentCube[1]];

    let tempMainArray = [...mainArray];
    // 把方块每一排放入场景相应位置
    let cubeRowLength = cubeArray.length;
    for (let cubeRow = 0; cubeRow < cubeRowLength; cubeRow++) {
      let cubeRowColLength = cubeArray[cubeRow].length;
      for (let cubeRowCol = 0; cubeRowCol < cubeRowColLength; cubeRowCol++) {
        if (!!cubeArray[cubeRow][cubeRowCol]) {
          if (
            tempMainArray[cubePosition[0] + cubeRow][
              cubePosition[1] + cubeRowCol
            ] === 2
          ) {
            finishGame();
          } else {
            tempMainArray[cubePosition[0] + cubeRow][
              cubePosition[1] + cubeRowCol
            ] = cubeArray[cubeRow][cubeRowCol];
          }
        }
      }
    }
    setMainArray(tempMainArray);
  }, [currentCube, cubePosition, isStart]);

  return (
    <div className="App">
      <div className="main">
        {mainArray.map((secArray, mindex) => {
          return (
            <div className="row" key={mindex}>
              {secArray.map((cube, sindex) => {
                let color = "";
                if (cube === 2) {
                  color = "gray";
                } else if (cube === 1) {
                  color = "red";
                }
                return <span className={`cube ${color}`} key={sindex}></span>;
              })}
            </div>
          );
        })}
      </div>
      <div className="tool">
        <div className="title">下一个</div>
        <div className="next">
          {nextCubeArray.map((secArray, mindex) => {
            return (
              <div className="row" key={mindex}>
                {secArray.map((cube, sindex) => {
                  return (
                    <span
                      className={`cube ${!!cube ? "nxt" : ""}`}
                      key={sindex}
                    ></span>
                  );
                })}
              </div>
            );
          })}
        </div>
        <div className="title">分数</div>
        <div className="score">{score}</div>
        <div className="title">消除行数</div>
        <div className="score">{rowCount}</div>
        <div className="title">操作</div>
        <div className="tips">
          <div className="tip">左移：←</div>
          <div className="tip">右移：→</div>
          <div className="tip">加速：↓</div>
          <div className="tip">换方向：↑</div>
          <div className="tip">暂停：空格</div>
        </div>
      </div>
      {isPause && <div className="pausegame">暂停！</div>}
      {!isStart && !isFinished && (
        <div className="startgame">
          <div className="start" onClick={start}>
            开始游戏
          </div>
        </div>
      )}
      {isFinished && (
        <div className="finish">
          <div className="msg">游戏结束！</div>
          <div className="cur">
            当前得分：{score}，消除行数：{rowCount}
          </div>
          {!!historyData && (
            <div className="his">
              历史最高得分：{historyData.score}，消除行数：{historyData.line}
              ，时间：{historyData.time}
            </div>
          )}
          <div className="restart" onClick={start}>
            重新开始
          </div>
        </div>
      )}
    </div>
  );
}

export default App;
